<template>
	<view class="wrap" :class="['qn-page-'+theme]">
		<uniStatusBar></uniStatusBar>
		<view class="top"><u-icon name="close" size="36rpx" @click="backPage"></u-icon></view>
		<view class="content">
			<view class="title">登录</view>
			<view class="title-desc">
				Hi，欢迎登录
				<text class="shop-name">千鸟云商</text>
			</view>
			<view class="u-border-bottom">
				<text class="tel-head">+86</text>
				<input class="tel-input" placeholder-class="input-pl" type="number" placeholder="请输入手机号" v-model="mobile" />
			</view>
			<view class="u-border-bottom">
				<input type="number" placeholder-class="input-pl" placeholder="请输入验证码" v-model="smsCode" />
				<view class="code-btn" @click="getCode">{{ codeTips }}</view>
			</view>
			<view class="login-btn t-login-btn" @click="login('sms')">登录</view>
			<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="login-btn wx-login">一键授权登录</button>
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	data() {
		return {
			codeTips: '',
			mobile: '',
			smsCode: ''
		};
	},
	computed: {
		wxUserInfo() {
			return this.$store.state.wxUserInfo;
		},
		openId() {
			return this.$store.state.wxOpenId;
		}
	},
	onShow() {},
	methods: {
		// 获取微信手机号
		getphonenumber(e) {
			console.log(e.detail);
			this.decryptData(e.detail);
			// this.login('wx');
		},
		// 解析微信获取到的手机号
		decryptData(obj) {
			this.$u.api
				.decryptData({
					openid: this.openId,
					iv: obj.iv,
					encryptedData: obj.encryptedData
				})
				.then(res => {
					this.mobile = res.data.phoneNumber;
					this.login('wx');
				});
		},
		// 登录提交
		login(source) {
			if (source === 'sms') {
				if (!this.mobile) {
					this.$u.toast('请输入手机号');
					return;
				}
				const re = /^1[3456789]\d{9}$/;
				if (!re.test(this.mobile)) {
					this.$u.toast('手机号格式不正确');
					return;
				}
				if (!this.smsCode) {
					this.$u.toast('请输入短信验证码');
					return;
				}
			}

			this.$u.api
				.login({
					mobile: this.mobile,
					smsCode: this.smsCode,
					openId: this.openId,
					avatar: this.wxUserInfo.avatarUrl,
					name: this.wxUserInfo.nickName,
					source: source //wx:微信绑定登录 sms:短信验证码登录
				})
				.then(res => {
					this.$store.commit('commit_token', res.data.token);
					this.$store.commit('commit_expireTime', res.data.expireTime);
					this.$store.commit('commit_hasLogin', true);

					this.goPage('/pages/index/index', 'switchTab');
				});
		},
		// 倒计时组件
		codeChange(text) {
			this.codeTips = text;
		},
		// 获取验证码
		getCode() {
			if (!this.mobile) {
				this.$u.toast('请输入手机号');
				return;
			}
			const re = /^1[3456789]\d{9}$/;
			if (!re.test(this.mobile)) {
				this.$u.toast('手机号格式不正确');
				return;
			}
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				});
				this.$u.api
					.sendMobileCode({
						mobile: this.mobile,
						source: 5
					})
					.then(res => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.wrap {
	font-size: 28rpx;
	.top {
		padding-top: 100rpx;
		padding-left: 30rpx;
	}
	.content {
		width: 600rpx;
		margin: 50rpx auto 0;
		.login-btn {
			margin-top: 20upx;
			display: block;
			margin-top: 30upx;
			height: 80upx;
			line-height: 80upx;
			background-color: $uni-color-primary;
			text-align: center;
			color: #ffffff;
			border-radius: 12upx;
			letter-spacing: 6upx;
		}
		.t-login-btn {
			margin-top: 100upx;
		}
		.wx-login {
			color: $uni-color-primary;
			background-color: transparent;
			font-size: 28upx;
			border: 1px solid $uni-color-primary;
			&::after {
				border: 0 none;
			}
		}
		.title {
			text-align: left;
			font-size: 50rpx;
		}
		.title-desc {
			padding-top: 16upx;
			font-size: 24upx;
			color: #999999;
			margin-bottom: 100rpx;
			.shop-name {
				color: $uni-color-primary;
			}
		}
		.u-border-bottom {
			line-height: 70rpx;
			border-bottom: 1px solid #f5f5f5;
			position: relative;
			padding-top: 50upx;
			input {
				height: 70upx;
				line-height: 70upx;
			}
			.tel-head {
				height: 70upx;
				line-height: 70upx;
				display: inline-block;
				vertical-align: middle;
			}
			.tel-input {
				width: 80%;
				display: inline-block;
				vertical-align: middle;
				margin-left: 20upx;
			}
			.code-btn {
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 9;
				color: $uni-color-primary;
				font-size: 24upx;
			}
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;

			&::after {
				border: none;
			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}

		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;

			.link {
				color: $u-type-warning;
			}
		}
	}
}
</style>
